<template>
  <div class="edit-product">
    <el-dialog :model-value="dialogProductVisible" title="编辑货品信息" @close="cancelFn">
      <!-- 搜索框 -->
      <div class="search">
        <span>商品货号 : {{ productSn }}</span>
        <el-input v-model="input3" placeholder="输入SKU编号搜索" class="input-with-select">
          <template #append>
            <el-button :icon="Search" />
          </template>
        </el-input>
      </div>
      <!-- 搜索结果展示  表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column align="center" prop="date" label="SKU编号" width="100" />
        <el-table-column align="center" prop="name" label="销售价格" />
        <el-table-column align="center" prop="address" label="商品库存" />
        <el-table-column align="center" prop="address" label="库存预警值" />
      </el-table>
      <!-- 底部  取消  确定 按钮 -->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelFn">取消</el-button>
          <el-button type="primary" @click="confirmFn">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';
import { ref } from 'vue';

const input3 = ref('');
const tableData = ref();

withDefaults(defineProps<{
  dialogProductVisible: boolean;
  productSn: number | string;
}>(), {
  dialogProductVisible: false,
  productSn: 0
});

const emits = defineEmits<{
  (e: 'cancel'): void;
  (e: 'confirm'): void;
}>();

// 点击  取消
const cancelFn = () => {
  // 触发 自定义事件 cancel
  emits('cancel');
}

// 点击 确定
const confirmFn = () => {
  // 触发 自定义事件 confirm
  emits('confirm');
}
</script>

<style scoped lang="less">
.edit-product {

  // 输入框
  .search {
    margin-bottom: 20px;

    span {
      margin-right: 20px;
    }

    // 修改 输入框的长度
    .el-input {
      width: 300px;
    }
  }
}
</style>